<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 1头部区域 -->
    <div class="baseHeader">
        <div class="wrapper">
            <!-- 左 -->
            <div class="logo">
                <img src="./static/logo.png" alt="">
            </div>
            <!-- 中 -->
            <div class="search">
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <div class="btn">搜索</div>
            </div>
            <!-- 右 -->
            <ul class="advantage">
                <li><img src="./static/1.png" alt="">
                    <span>全程包邮</span>
                </li>
                <li><img src="./static/2.png" alt="">
                    <span>7天退换</span>
                </li>
                <li><img src="./static/3.png" alt="">
                    <span>品质保证</span>
                </li>
            </ul>

        </div>
    </div>

    <!-- 2导航区域 -->
    <div class="normal">
        <ul class="navbanner">
            <li class="active">首页</li>
            <li class="jiujiu">9块9包邮</li>
            <li class="czq">超值大额券</li>
            <li class="nvzhuang">夏季女装上新</li>
        </ul>
    </div>

    <!-- 3轮播图导航区域 -->
    <div class="indexBanner">
        <div class="banner">
            <!-- 左导航栏 -->
            <ul class="nav2">
                <li>

                    <img src="./static/1-.png" alt="">
                    <div class="baab">
                        <p>女装</p>/<p>女鞋</p>

                    </div>
                </li>
                <li>

                    <img src="./static/2-.png" alt="">
                    <div class="baab">
                        <p>男装</p>/<p>男鞋</p>

                    </div>
                </li>
                <li>

                    <img src="./static/3-.png" alt="">
                    <div class="baab">
                        <p>美妆</p>/<p>个护</p>

                    </div>
                </li>
                <li>

                    <img src="./static/4-.png" alt="">
                    <div class="baab">
                        <p>配饰</p>/<p>箱包</p>

                    </div>
                </li>
                <li>

                    <img src="./static/5-.png" alt="">
                    <div class="baab">
                        <p>零食王国</p>

                    </div>
                </li>
                <li>

                    <img src="./static/6-.png" alt="">
                    <div class="baab">
                        <p>母婴用品</p>

                    </div>
                </li>
                <li>

                    <img src="./static/7-.png" alt="">
                    <div class="baab">
                        <p>手机</p>/<p>数码</p>

                    </div>
                </li>
                <li>

                    <img src="./static/8-.png" alt="">
                    <div class="baab">
                        <p>内衣袜子</p>

                    </div>
                </li>
                <li>

                    <img src="./static/9-.png" alt="">
                    <div class="baab">
                        <p>文娱</p>/<p>家具</p>

                    </div>
                </li>
            </ul>

            <!-- 中间轮播上 -->

            <div class="container">
                <ul class="wrapper">
                    <li class="slide"><img src="./static/lunbo1.jpeg" alt=""></li>
                    <li class="slide"><img src="./static/lunbo2.jpeg" alt=""></li>

                </ul>

                <!-- 分页器 -->
                <ol class="pagination">
                    <i class="active"></i>
                    <i></i>
                </ol>

                <!-- 左右按钮 -->
                <div class="prev">&lt;</div>
                <div class="next">&gt;</div>

                <!-- 中间轮播图下 -->
                <div class="banner-container-bottom">
                    <div class="left1">
                        <h3>夏季女装上新</h3>
                        <p>速来抢购~</p>
                        <span href="#" class="btn1">Go</span>
                        <img src="./static/y1.png" alt="" class="pic1">
                    </div>
                    <div class="right1">
                        <h3>超值大额券</h3>
                        <p>优惠直击低价</p>
                        <span href="#" class="btn2">Go</span>
                        <img src="./static/y2.png" alt="" class="pic2">
                    </div>
                </div>
            </div>



            <!-- 右边 -->
            <div class="right">
                <!-- 上 -->
                <div class="top">
                    <h3>9块9包邮</h3>
                    <div class="prompt">保你不吃亏</div>
                    <img src="./static/x1.gif" alt="" class="pic3">
                </div>
                <div class="bottom">
                    <p class="data1">扫码下载APP</p>
                    <p class="data2">发现更多惊喜</p>
                    <img src="./static/ewm.png" alt="" class="pic4">
                </div>
            </div>
        </div>
    </div>


    <!-- title-bar -->
    <div class="title-bar">
        <div class="bar-banner">
            <h3 class="data-v1">小编精选</h3>
            <p class="data-v2">每天更新</p>
        </div>
    </div>
    <div class="backbtn" onclick="onBackTop()">
        <img src="./static/dingbu.png" alt="" class="top">
    </div>
    <!-- choice商品列表区域 -->
    <div class="choice">
        <div class="choice-banner">
            <ul class="base-commodity-list">
                <!-- 引入模板 -->
               

                <script type="text/html" id="list">
        {{each list}}
        <li onclick="getId({{$value.id}})" class="commodity">
            <img src="{{$value.image}}" alt="">
            <div class="xia">
            <p class="describe">{{$value.title}}</p>
            <div class="commodity-card-keyword">
                <span class="one1">{{$value.commodityTypeName}}</span>
                <span class="two1">包邮</span>
            </div>

            <div class="commodity-card-foot">
        
            <span class="price-tag">￥</span>
            <span class="price-strong">{{$value.price}}</span>
            <span class="digit"></span>
            <span class="sale-num">{{$value.saleNum}}人已购买</span>
        
                <span class="coupon-value">{{$value.couponValue}}</span>
            </div>
                    </div>
                    {{/each}}
           </li>
        </script>    

                     <!-- 引入模板 -->
                
</ul>


        </div>
    </div>

    <!-- 查看更多 -->
    <div class="choice-more-btn">
        <div class="more-btn">
            <div class="look-btn">查看更多</div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="base-footer">
            <img src="./static/logo1.png" alt="" class="img1">
            <h1 class="xmyx">熊猫优选</h1>
            <p class="xiangqing">年轻人网购首选<br>
                购物领券更省钱
            </p>
            <span class="xian">|</span>
            <span class="item">下载APP</span>

            <p class="footer2">
                <img src="./static/policeIcon.png" alt="" class="police-icon">
                浙江安网备案&nbsp;33010602009949&nbsp;|&nbsp;ICP备17012864号:-1&nbsp;|&nbsp;
                <img src="./static/license2.png" alt="" class="police-icon2">
                <span class="xinxi">证照信息</span>

            </p>
        </div>

    </div>

    <!-- aqLogoLRRZT -->
    <div class="aqLogoLRRZT">
        <div class="aqLogo">
            <img src="./static/121.png" alt="">
        </div>
    </div>
    <script type="text/html" id="lists">
        {{each lists}}
        <li onclick="getId({{$value.id}})" class="commodity">
            <img src="{{$value.image}}" alt="">
            <div class="xia">
            <p class="describe">{{$value.title}}</p>
            <div class="commodity-card-keyword">
                <span class="one1">{{$value.commodityTypeName}}</span>
                <span class="two1">包邮</span>
            </div>

            <div class="commodity-card-foot">
        
            <span class="price-tag">￥</span>
            <span class="price-strong">{{$value.price}}</span>
            <span class="digit"></span>
            <span class="sale-num">{{$value.saleNum}}人已购买</span>
        
                <span class="coupon-value">{{$value.couponValue}}</span>
            </div>
                    </div>
                    {{/each}}
           </li>
        </script>   
    <script src="./lib/jquery-3.6.0.js"></script>
    <script src="./js/tools.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./js/index.js"></script>
    <!-- 轮播图 -->



</body>

</html>